<template>
  <div class="animate__animated animate__fadeIn">
    <el-card>
      <!--查询部分-->
      <div class="top-container">
        <!--搜索部分-->
        <div class="search-container" v-show="searchShow">
          <el-input
              style="width: 25%;margin-right: 10px"
              placeholder="请输入角色名称..."
              size="small"
              prefix-icon="el-icon-search"
              clearable
              @clear="clearMenuName"
              v-model="searchCondition.name">
          </el-input>
          <el-select v-model="searchCondition.isDisable"
                     clearable
                     size="small"
                     @clear="clearMenuStatus"
                     placeholder="请选择角色状态">
            <el-option :key=true label="禁用" :value="true"/>
            <el-option :key="false" label="正常" :value="false"/>
          </el-select>
          <el-button type="primary"
                     size="small"
                     icon="el-icon-search"
                     @click="searchRole"
                     style="margin-left: 10px">搜索
          </el-button>
        </div>
        <!--添加部分-->
        <div class="save-container">
          <!--添加-->
          <div class="save-box">
            <el-button type="primary" size="small" plain icon="el-icon-plus" @click="saveRoleVisible = true">添加角色
            </el-button>
          </div>
          <!--关闭-->
          <div class="close-box">
            <el-tooltip content="关闭查询" placement="bottom">
              <el-button type="primary" size="small" plain circle icon="el-icon-search"
                         @click="searchShow = !searchShow"/>
            </el-tooltip>
            <el-tooltip content="刷新数据" placement="bottom">
              <el-button type="success" size="small" plain circle icon="el-icon-refresh" @click="initData"/>
            </el-tooltip>
            <el-tooltip content="显隐列" placement="bottom">
              <el-button type="warning" size="small" plain circle icon="el-icon-menu" @click="transferVisible = true"/>
            </el-tooltip>
          </div>
        </div>
      </div>
      <!--显隐列 弹出层-->
      <el-dialog
          title="显隐列设置"
          :visible.sync="transferVisible"
          width="45%"
          append-to-body
          center>
        <el-transfer
            v-model="transferValue"
            :data="transferData"
            :titles="transferTitles">
        </el-transfer>
      </el-dialog>
      <!--数据部分-->
      <el-table
          :data="roleList"
          border
          highlight-current-row
          style="width: 100%">
        <el-table-column
            label="序号"
            width="55">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
            v-if="transferValue.includes('角色Id')"
            fixed
            prop="roleId"
            label="角色 Id"
            align="center"
            width="80">
        </el-table-column>
        <el-table-column
            v-if="transferValue.includes('角色名称')"
            prop="roleName"
            label="角色名称"
            align="center"
            width="200">
        </el-table-column>
        <el-table-column
            v-if="transferValue.includes('角色标识')"
            prop="roleKey"
            label="角色标识"
            align="center"
            width="200">
        </el-table-column>
        <el-table-column
            v-if="transferValue.includes('角色状态')"
            prop="isDisable"
            label="角色状态"
            :formatter="formatStatus"
            align="center"
            width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.isDisable === false" type="success">正常</el-tag>
            <el-tag v-if="scope.row.isDisable === true" type="danger">失效</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            v-if="transferValue.includes('角色编号')"
            prop="roleNum"
            label="角色编号"
            align="center"
            width="120">
        </el-table-column>
        <el-table-column
            v-if="transferValue.includes('是否删除')"
            prop="delFlag"
            label="是否删除"
            :formatter="formatDelFlag"
            width="120">
        </el-table-column>
        <el-table-column
            label="操作"
            align="center"
            width="120">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="viewRoleClick(scope.row)" type="text" size="small">查看</el-button>
            <el-button @click="deleteRoleClick(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
      </el-pagination>

      <!--新增 弹出层-->
      <el-drawer
          :title="roleFormTitle"
          :visible.sync="saveRoleVisible"
          append-to-body
          direction="rtl"
          size="28%"
          :before-close="leave">
        <div class="save-container">
          <el-form ref="roleFormCheck"
                   :rules="rule"
                   :model="roleInfo"
                   :disabled="roleInfoFormStatus"
                   label-width="90px"
                   class="demo-ruleForm">
            <el-form-item label="角色Id" v-if="roleInfo.roleId !== -1">
              <el-tag type="success">{{ roleInfo.roleId }}</el-tag>
            </el-form-item>

            <el-form-item label="角色名称" prop="roleName">
              <el-input v-model="roleInfo.roleName"
                        border
                        label="role"
                        placeholder="请输入角色名称..."/>
            </el-form-item>
            <el-form-item label="角色标识" prop="roleKey">
              <el-input v-model="roleInfo.roleKey"
                        border
                        label="role"
                        placeholder="请输入角色标识..."/>
            </el-form-item>
            <el-form-item label="角色排序" prop="roleNum">
              <el-input v-model="roleInfo.roleNum"
                        border
                        label="role"
                        type="number"
                        @mousewheel.native.prevent
                        placeholder="请输入角色排序编号..."/>
            </el-form-item>

            <el-form-item label="是否生效" align="center" prop="gender">
              <el-select v-model.number="roleInfo.isDisable"
                         clearable
                         size="small"
                         border
                         label="user"
                         placeholder="是否生效">
                <el-option :key="true" label="禁用" :value="true"/>
                <el-option :key="false" label="正常" :value="false"/>
              </el-select>
            </el-form-item>


            <el-form-item align="center">
              <el-button icon="el-icon-sunny" size="small" type="success" plain @click="saveRoleContent('roleFormCheck')">
                确定
              </el-button>
              <el-popconfirm
                  v-if="roleInfo.roleId === -1"
                  style="margin-left: 10px"
                  title="确定要重置用户信息吗？"
                  @confirm="clearRoleInfoForm">
                <el-button icon="el-icon-refresh" size="small" type="warning" plain slot="reference">重置</el-button>
              </el-popconfirm>
            </el-form-item>
          </el-form>
        </div>
      </el-drawer>
    </el-card>

  </div>
</template>

<script>

import {
  getRoleList,
  searchRoleByCondition,
  addRole,
  updateRole,
  transferRoleData,
  transferTitles, deleteRole
} from "../../../api/consumer/roleApi";
import {messageInfo} from "@/utils/MessageInfo";
import {addUserInfo, deleteUserInfo, updateUserInfo} from "@/api/consumer/consumerApi";
import {resultCheck} from "@/utils/result";
export default {
  name: "roleInfo",
  data() {
    return {
      loading: true,      //表单加载
      searchShow: true,   //查询功能是否开启
      searchCondition: {   //查询条件
        name: '',
        isDisable: false,
      },
      // ================== 穿梭表单数据 ================================
      transferTitles: transferTitles(),  //穿梭表单title
      transferValue: ["角色ID", "角色名称", "角色标识",  "角色状态", "角色编号", "是否删除"],               //穿梭表单选中数据
      transferData: transferRoleData(),      //穿梭表单数据
      transferVisible: false,            //显隐列是否开启
      roleList: [],  // 角色列表
      // ================== 添加侧边栏信息展示 ================================
      roleFormTitle: "新增角色信息",
      saveRoleVisible: false,  // 是否显示侧边栏
      roleInfoFormStatus: false, // 表单是否禁用编辑
      // ================== 新增/修改角色表单控制 ================================
      rule: {
        roleKey: [{required: true, message: '角色标识不能为空！', trigger: 'blur'}],
        roleName: [{required: true, message: '角色名称不能为空！', trigger: 'blur'}],
        roleNum: [{required: true, message: '角色顺序！', trigger: 'blur'}]
      },

      roleInfo: {
        roleId: -1,
        roleKey: "",
        roleName: "",
        roleNum: 1000,

      },
    }

  },
  mounted() {
    this.initData();
  },
  methods: {
    //=======================  数据初始化  ===========================
    initData() {
      this.loading = true;
      getRoleList().then(res => {
        if (res.status) {
          this.roleList = res.data;
        } else {
          messageInfo({type: "error", message: res.message});
        }
        this.loading = false;
      });
    },
    //=======================  新增/修改菜单部分  ===========================
    leave() {
      // 如果表格不是禁用状态离开，进行提醒！
      if (!this.roleInfoFormStatus){
        this.$confirm('数据不会临时保存，切勿离开此界面！')
            .then(_ => {
              this.roleInfo = {roleId: -1};
              this.saveRoleVisible = false;
            });
      }else {
        this.roleInfo = {roleId: -1};
        this.saveRoleVisible = false;
        this.roleInfoFormStatus = false
      }
    },
    //=======================  清空菜单状态  ===========================
    clearMenuStatus() {
      this.initData();
    },
    //=======================  清空菜单名称  ===========================
    clearMenuName() {
      this.initData();
    },
    //=======================  点击编辑按钮  ===========================
    handleClick(row) {
      // 取消禁用表单
      this.roleFormTitle = "编辑用户信息";
      this.roleInfoFormStatus = false;

      this.roleInfo = {
        roleId: row.roleId,
        roleName: row.roleName,
        roleKey: row.roleKey,
        roleNum: row.roleNum,
        isDisable: row.isDisable,
      };
      this.saveRoleVisible = true;
    },
    //=======================  处理查看按钮  ===========================
    viewRoleClick(row){
      this.handleClick(row);
      this.roleFormTitle = "查看角色信息";
      // 禁用表单
      this.roleInfoFormStatus = true
    },
    //=======================  处理删除按钮  ===========================
    deleteRoleClick(row){
      deleteRole(row.roleId).then(res => {
        if (res.status) {
          resultCheck(res, true);
          this.initData();
          messageInfo({type: "success", message: res.message});
        } else {
          messageInfo({type: "error", message: res.message});
        }
        this.loading = false;
      });
      this.initData();
    },
    //=======================  boolean 格式化  ===========================
    formatDelFlag: function (row, index) {
      let ret = '';
      if (row.delFlag === false) {
        ret = "是" //根据自己的需求设定
      } else {
        ret = "否"
      }
      return ret;
    },
    formatStatus: function (row, index) {
      let ret = '';
      if (row.isDisable === false) {
        ret = "正常" //根据自己的需求设定
      } else {
        ret = "失效"
      }
      return ret;
    },
    //=======================  处理页面尺寸变化  ===========================
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    //=======================  处理页面编号变化  ===========================
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    //=======================  处理搜索按钮点击之后数据更新  ===========================
    searchRole() {
      searchRoleByCondition(this.searchCondition).then(res => {
        if (res.status) {
          this.roleList = res.data;
        } else {
          messageInfo({type: "error", message: res.message});
        }
        this.loading = true;
      });
    },
    //======================= 查询用户信息  ===========================
    saveRoleContent(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 添加用户信息
          if (this.roleInfo.roleId === -1) {
            console.log(this.roleInfo)
            addRole(this.roleInfo).then(res => {
              resultCheck(res, true);
            });
            this.initData();
          } else {
            // 更新用户信息
            updateRole(this.roleInfo).then(res => {
              if (res.status) {
                resultCheck(res, true);
                messageInfo({type: "success", message: res.message});
              } else {
                messageInfo({type: "error", message: res.message});
              }
            })
          }

          this.saveRoleVisible = false; // 关闭表单侧边栏
          // 更新用户数据信息
          this.loading = true;
          this.clearRoleInfoForm();
          this.initData();
        } else {

        }
      });
    },
    clearRoleInfoForm(){
      this.roleInfo = {
        roleId: -1,
      };
    },

  }

}
</script>

<style>
.top-container {
  width: 100%;
}

.search-container {
  width: 100%;
  display: flex;
  justify-content: left;
}

.save-container {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.el-button--text {
  color: #70b2f8;
  font-size: 12px;
}
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
  -moz-appearance: textfield;
}
</style>